<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>路书</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map_canvas {
            width: 100%;
            height: 500px;
        }

        #result {
            width: 100%;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
    <script type="text/javascript" src="LuShu.min.js"></script>
</head>
<body>
    <div id="map_canvas"></div>
    <div id="result"></div>
    <button id="run">开始</button>
    <button id="run2">加速x2</button>
    <button id="run3">加速x3</button>
    <button id="resetSpeed">重置速度</button>
    <button id="back">快退</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>
    <button id="hide">隐藏信息窗口</button>
    <button id="show">展示信息窗口</button>
    <button id="other">自定义轨迹</button>
    <script>

        var map = new BMap.Map('map_canvas');
        map.enableScrollWheelZoom();
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
        var lushu;

        //也可以自定义一组坐标集合。手动在地图上边画折线。加载路书
        //例如：
        /*
        //$("xxx").onclick = function ()
        //{
            //1.定义坐标地址集合
            var poiList = [new BMap.Point(116.399, 39.910),
    	new BMap.Point(116.405, 39.920),
		new BMap.Point(116.425, 39.900)];//
            //2.根据坐标画折线
            var polyline = new BMap.Polyline(poiList, { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });
            map.addOverlay(polyline);          //增加折线
            //3.填充坐标到路书
            lushu = new BMapLib.LuShu(map, poiList, {
                defaultContent: "自定义轨迹-sunny测试",//"从天安门到百度大厦"
                autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                speed: 4500,
                enableRotation: false//是否设置marker随着道路的走向进行旋转
            });
            //4.执行 轨迹事件
        //}
        */
        //绑定事件
        $("run").onclick = function () {
            lushu.start();
        }
        $("run2").onclick = function () {
            lushu.changeSpeed(2);
        }
        $("run3").onclick = function () {
            lushu.changeSpeed(3);
        }
        $("resetSpeed").onclick = function () {
            lushu.resetSpeed();
        }
        $("stop").onclick = function () {
            lushu.stop();
        }
        $("back").onclick = function () {
            lushu.back();
        }
        $("pause").onclick = function () {
            lushu.pause();
        }
        $("hide").onclick = function () {
            lushu.hideInfoWindow();
        }
        $("show").onclick = function () {
            lushu.showInfoWindow();
        }
        $("other").onclick = function () {
            //1.定义坐标地址集合
            var poiList = [new BMap.Point(116.399, 39.910),new BMap.Point(116.405, 39.920),new BMap.Point(116.425, 39.900)];//
            //2.根据坐标画折线
            var polyline = new BMap.Polyline(poiList, { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });
            map.addOverlay(polyline);          //增加折线
            //3.填充坐标到路书
            lushu = new BMapLib.LuShu(map, poiList, {
                defaultContent: "自定义轨迹-sunny测试",//"从天安门到百度大厦"
                autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                speed: 4500,
                enableRotation: false//是否设置marker随着道路的走向进行旋转
            });
        }
        function $(element) {
            return document.getElementById(element);
        }
    </script>
</body>
</html>